<template>
	<view>
		<view class="backgroundhead">
			<view class="uni-box">
				<img class="user" :src="resultUser.photoimg">
			</view>

			<view class="information">
				<text>{{resultUser.userName}}</text>
			</view>
			<view class="satisfied">
				<text>满意度</text>
			</view>
			<view class="uni-box1">
				<view class="mileage">
					<text>配送里程</text>
					<p></p>
					<text>11</text>
				</view>
				<view class="line">

				</view>
				<view class="tolai" v-for="item in resultyi">
					<text>订单总数</text>
					<p></p>
					<text v-if="item.count == 0">您暂时没有单</text>
					<text v-if="item.count !== 0" style="color: #2ECC71;">{{item.count+resultc.count}}单</text>
				</view>
			</view>
			<view class="uni-box2">
				<view style="margin-left: 10rpx; margin-right: 10rpx;">
					<uni-list :border="false">
						<navigation @click = "completed()">
						<uni-list-item :border="false" title="已完成订单" showArrow thumb='../../static/img/order.png' />
						</navigation>
						<uni-list-item :border="false" title="联系客服" showArrow
							thumb='../../static/img/customerservice.png' />
						<uni-list-item :border="false" title="自动接单" showArrow thumb='../../static/img/find.png' />
						<uni-list-item :border="false" title="修改密码" showArrow thumb='../../static/img/modify.png' />
						<!-- 	<uni-list-item :border="false" title="自动接单" showArrow thumb='../../static/img/find.png'/> -->
						<!-- 	<uni-list-item title="用户姓名" style="height: 60px;margin-top: 10px;" thumb-size="lg"
						:rightText='userInfoList.userName'>
					</uni-list-item> -->
					</uni-list>
				</view>
			</view>

		</view>
		<view class="buttonexit">、
			<button class="button-yuanjiao" hover-class="bg-click" @click="">退出登录</button>
		</view>
		<!-- <button class="rider" hover-class="bg-click" @click="">金牌骑手</button> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
				resultUser:{},
				resultyi:{},
			}
		},
		onLoad() {
			this.loadDataC()
			this.loadDataName()
			this.loadDataR()
		},
		methods: {
			completed(){
				uni.navigateTo({
					url:'./information/CompletedOrder'
				})
			},
			loadDataName(){
				uni.getStorage({
					key: 'userid',
					success: res => {
						this.userid = res.data
						console.log("zaizhe", this.userid)
					}
				})
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getUserRoId',
					method: 'GET',
					data: {
						riderId: this.userid,
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultUser = res.data.data.userList;
						// console.log(this.resultUser)
					},
				})
			},
			loadDataR() {
				uni.getStorage({
					key: 'userid',
					success: res => {
						this.userid = res.data
						console.log("zaizhe", this.userid)
					}
				})
				uni.request({
					
					url: 'http://localhost:9525/xkrider/recyclingorder/getRecyclingorderComplete',
					method: 'GET',
					data: {
						riderId: this.userid,
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultyi = res.data.data.recyclingorderVo;
						// console.log(this.resultyi)
					},
				})
			},
			loadDataC(){
				uni.getStorage({
					key: 'userid',
					success: res => {
						this.userid = res.data
						console.log("zaizhe", this.userid)
					}
				})
				uni.request({
					url: 'http://localhost:9525/xkrider/commodityorder/getCommodityorderCount',
					method: 'GET',
					data: {
						riderId: this.userid,
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						this.resultc = res.data.data.count;
						console.log(this.resultc,"zhelll")
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.rider {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		line-height: 50rpx;
		justify-content: center;
		border-radius: 25px;
		font-size: 10px;
		margin-top: 130px;


		// float:  left;
	}

	page {
		background-color: #EBFCF9;
		font-weight: bold;
	}

	.buttonexit {
		margin-top: 10px;
		// border: 5px solid #3F536E;
		margin-left: 80rpx;
		float: left;

	}

	.button-yuanjiao {
		width: 600rpx;
		height: 80rpx;
		display: flex;
		line-height: 50rpx;
		justify-content: center;

		border-radius: 25px;
		// 这里可以改成渐变： 
		// background: linear-gradient(to right, #2ECC71, #2ABA66);
		background-color: #ED5565;
		font-size: 17px;
		color: #FFFFFF;
		margin-top: 30px;
		padding: 7px;
		// font-family:STCaiyun;

	}

	.satisfied {
		// border: 5px solid #3F536E;
		position: absolute;
		margin-top: 145rpx;
		margin-left: 280rpx;
		font-size: 15px;
		color: #FFFFFF;
	}

	.information {
		// border: 5px solid #3F536E;
		float: left;
		margin-top: 65rpx;
		margin-left: 35rpx;
		font-size: 25px;
		color: #FFFFFF;
	}

	.user {
		width: 130rpx;
		height: 130rpx;
		// margin-top: 15rpx;
		// margin-left: 15rpx;

		border-radius: 50px;
	}

	.backgroundhead {
		background-image: url('@/static/img/head.png');
		width: 100%;
		height: 234px;
		// font-family:Microsoft YaHei;

	}

	.uni-box {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50px;
		border: 1px solid #FFFFFF;
		padding: 10px;
		margin-left: 25px;
		// box-shadow: darkgrey 3px 3px 3px 3px;
		// position: absolute;
		// left: 25rpx;
		background-color: #FFFFFF;
		float: left;
		margin-top: 20px;
	}

	.uni-box1 {
		width: 600rpx;
		height: 130rpx;
		border-radius: 7px;
		// border: 1px solid #3F536E;
		padding: 10px;
		margin-left: 25px;
		box-shadow: darkgrey 3px 3px 3px 3px;
		// position: absolute;
		// left: 25rpx;
		background-color: #FFFFFF;
		float: left;
		margin-top: 50px;
	}

	.uni-box2 {
		width: 600rpx;
		height: 400rpx;
		border-radius: 7px;
		// border: 1px solid #3F536E;
		padding: 10px;
		margin-left: 25px;
		box-shadow: darkgrey 3px 3px 3px 3px;
		// position: absolute;
		// left: 25rpx;
		background-color: #FFFFFF;
		float: left;
		margin-top: 20px;
	}

	.mileage {
		width: 200rpx;
		height: 130rpx;
		// border: 1px solid #2ECC71;
		float: left;
		text-align: center;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.tolai {
		width: 200rpx;
		height: 130rpx;
		// border: 1px solid #2ECC71;
		float: right;
		text-align: center;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.line {
		width: 0rpx;
		height: 130rpx;
		border: 1px solid #2ECC71;
		float: left;
		margin-left: 85rpx;
	}
</style>
